<template>
    <div class="new-topic" style="margin-top: 80px">

        <p class="el-icon-s-management" style="color: #0084ff;font-size: 34px"></p>
        <i style="font-size: 25px;color: #121212;padding-left: 12px;font-weight: 600;">最新专题</i>


<!--        <el-row class="topic" type="flex" justify="center" >-->
            <!--        左边-->
<!--            <el-col :span="12">-->
<!--                <div class="topic-item" style="background-color: white;border-radius: 4px;" v-for="item in newTopicR">-->

<!--&lt;!&ndash;                    <img src="https://pic1.zhimg.com/100/v2-bbee05b4783e9bb60849407d05d85904_hd.png" alt="">&ndash;&gt;-->
<!--                                        <img :src="item.img" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">-->
<!--                    <el-row :gutter="20"  class="topic-head" >-->
<!--                        <el-col :span="18"><div class="grid-content bg-purple">{{item.title}}-->
<!--                            <div  class="look">-->
<!--                                <i>{{item.refresh}} 更新</i>-->
<!--                                <i>{{item.scan}}浏览</i>-->
<!--                            </div>-->
<!--                        </div></el-col>-->
<!--                        <el-col :span="4"><div class="watch_bcg">-->
<!--                            <button v-if="!item.isfocus"  class="watch_btn" @click="handleWatch(item.id)" :style="btn" >关注专题</button>-->
<!--                            &lt;!&ndash;                            <button v-else="item.isfocus" class="watch_btn2" @click="handleNoWatch(item)" :style="btn2" >已关注</button>&ndash;&gt;-->

<!--                            &lt;!&ndash;                            <button class="watch_btn"  v-bind:class='{watch_btn2:item.id==isActive}'  @click="clickState(item.id) "&ndash;&gt;-->
<!--                            &lt;!&ndash;                            >{{item.btn}}</button>&ndash;&gt;-->
<!--                            &lt;!&ndash;                            <button class="watch_btn2"  v-bind:class='{watch_btn:item.id==isActiveq}'  @click="clickStateq(item.id) "&ndash;&gt;-->
<!--                            &lt;!&ndash;                            >{{item.btn2}}</button>&ndash;&gt;-->
<!--                            &lt;!&ndash;                            <button class="watch_btn"  :class="{activity:activityindex==index}" v-on:click="d(1)">{{item.btn2}}</button>&ndash;&gt;-->

<!--                        </div></el-col>-->
<!--                    </el-row>-->
<!--                    <div class="bang" style="margin: 20px 24px">-->
<!--                        <div class="bang" style="display: flex">-->
<!--                            <a class="contentTag" href="https://www.zhihu.com/special/19690612#NewsSpecial-SubModule-1309499719769194496" target="_blank">全部榜单内容</a>-->
<!--                            <a class="contentTitle" href="https://www.zhihu.com/special/19690612#NewsSpecial-SubModule-1309499719769194496" target="_blank">{{item.content_one}}</a>-->
<!--                        </div>-->
<!--                        <div class="bang" style="display: flex">-->
<!--                            <a class="contentTag" href="https://www.zhihu.com/zvideo/1307717282844749824" target="_blank">全部榜单内容</a>-->
<!--                            <a class="contentTitle" href="https://www.zhihu.com/zvideo/1307717282844749824" target="_blank">{{item.content_two}}</a>-->
<!--                        </div>-->
<!--                        <div class="bang" style="display: flex">-->
<!--                            <a class="contentTag" href="https://www.zhihu.com/zvideo/1305790964611883008" target="_blank">全部榜单内容</a>-->
<!--                            <a class="contentTitle" href="https://www.zhihu.com/zvideo/1305790964611883008" target="_blank">{{item.content_three}}</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </el-col>-->

            <!--右边-->
<!--            <el-col :span="12">-->
<!--                <div class="topic-item" style="background-color: white;border-radius: 4px;">-->

<!--                    <img src="https://pic2.zhimg.com/100/v2-ed0f4f968dc08602cd150dbc62d1b401_hd.png" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">-->
<!--                    <el-row :gutter="20"  class="topic-head" >-->
<!--                        <el-col :span="18"><div class="grid-content bg-purple">{{item.title}}-->
<!--                            <div  class="look">-->
<!--                                <i>{{item.refresh}} 更新</i>-->
<!--                                <i>{{item.scan}}浏览</i>-->
<!--                            </div>-->
<!--                        </div></el-col>-->
<!--                        <el-col :span="4"><div class="watch_bcg">-->
<!--                            <button class="watch_btn" @click="handleWatch" >关注专题</button>-->
<!--                            &lt;!&ndash;                            <button class="watch_btn2" :style="handleNoWatch" @click="handleNoW">已关注</button>&ndash;&gt;-->
<!--                        </div></el-col>-->
<!--                    </el-row>-->
<!--                    <div class="bang" style="margin: 20px 24px">-->
<!--                        <div class="bang" style="display: flex">-->
<!--                            <a class="contentTag" href="https://www.zhihu.com/special/19690612#NewsSpecial-SubModule-1309499719769194496" target="_blank">全部榜单内容</a>-->
<!--                            <a class="contentTitle" href="https://www.zhihu.com/special/19690612#NewsSpecial-SubModule-1309499719769194496" target="_blank">{{item.content_one}}</a>-->
<!--                        </div>-->
<!--                        <div class="bang" style="display: flex">-->
<!--                            <a class="contentTag" href="https://www.zhihu.com/zvideo/1307717282844749824" target="_blank">全部榜单内容</a>-->
<!--                            <a class="contentTitle" href="https://www.zhihu.com/zvideo/1307717282844749824" target="_blank">{{item.content_two}}</a>-->
<!--                        </div>-->
<!--                        <div class="bang" style="display: flex">-->
<!--                            <a class="contentTag" href="https://www.zhihu.com/zvideo/1305790964611883008" target="_blank">全部榜单内容</a>-->
<!--                            <a class="contentTitle" href="https://www.zhihu.com/zvideo/1305790964611883008" target="_blank">{{item.content_three}}</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--        1-->
        <el-row class="topic" type="flex" justify="center" >
<!--         左无循环   -->
            <el-col :span="12">
                <div class="topic-item" style="background-color: white;border-radius: 4px;">

                    <img src="https://pic1.zhimg.com/100/v2-bbee05b4783e9bb60849407d05d85904_hd.png" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">
<!--                    <img :src="item.img" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">-->
                    <el-row :gutter="20"  class="topic-head" >
                        <el-col :span="18"><div class="grid-content bg-purple">
                            <a href="https://www.zhihu.com/special/21539069" style="color:#121212;">西安城市附近计划</a>
                            <div  class="look">
                                <i>两小时前 更新</i>
                                <i>3,805,921 浏览</i>
                            </div>
                        </div></el-col>
                        <el-col :span="4"><div class="watch_bcg">
                            <button id="bt1" class="watch_btn" @click="handleBt1(this)">关注专题</button>
<!--                            <button   class="watch_btn" @click="handleWatch()"  >关注专题</button>-->
<!--                            <button v-else="item.isfocus" class="watch_btn2" @click="handleNoWatch(item)" :style="btn2" >已关注</button>-->

<!--                            <button class="watch_btn"  v-bind:class='{watch_btn2:item.id==isActive}'  @click="clickState(item.id) "-->
<!--                            >{{item.btn}}</button>-->
<!--                            <button class="watch_btn2"  v-bind:class='{watch_btn:item.id==isActiveq}'  @click="clickStateq(item.id) "-->
<!--                            >{{item.btn2}}</button>-->
<!--                            <button class="watch_btn"  :class="{activity:activityindex==index}" v-on:click="d(1)">{{item.btn2}}</button>-->

                        </div></el-col>
                    </el-row>
                    <div class="bang" style="margin: 20px 24px">
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/21539069#NewsSpecial-SubModule-1310237250966560768" target="_blank">城市一角</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/22078355/answer/302356299" target="_blank">西安回民街有什么好吃的？</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/21539069#NewsSpecial-SubModule-1310237461793132544" target="_blank">城市小店</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/426513215" target="_blank">西安有哪些值得逛的宝藏店铺？</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/21539069#NewsSpecial-SubModule-1310237503249899520" target="_blank">城市记忆</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/426544006" target="_blank">西安哪些商圈承载着你的青春？</a>
                        </div>
                    </div>
                </div>
            </el-col>
            <!--右边无循环-->
            <el-col :span="12">
                <div class="topic-item" style="background-color: white;border-radius: 4px;">

<!--                    <img src="https://pic1.zhimg.com/100/v2-bbee05b4783e9bb60849407d05d85904_hd.png" alt="">-->
                        <img src="https://pic4.zhimg.com/100/v2-f9be7224618f0cd59935c45b3476a27f_hd.png" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">
                    <el-row :gutter="20"  class="topic-head" >
                        <el-col :span="18"><div class="grid-content bg-purple">
                            <a href="https://www.zhihu.com/special/19577883" style="color: #121212">原产地至关重要——挪威三文鱼</a>
                            <div  class="look">
                                <i> 11-13 更新</i>
                                <i>2,491,162 浏览</i>
                            </div>
                        </div></el-col>
                        <el-col :span="4"><div class="watch_bcg">
                            <button id="bt2" class="watch_btn" @click="handleBt2(this)">关注专题</button>
<!--                            <button   class="watch_btn" @click="handleWatch()"  >关注专题</button>-->
                            <!--                            <button v-else="item.isfocus" class="watch_btn2" @click="handleNoWatch(item)" :style="btn2" >已关注</button>-->

                            <!--                            <button class="watch_btn"  v-bind:class='{watch_btn2:item.id==isActive}'  @click="clickState(item.id) "-->
                            <!--                            >{{item.btn}}</button>-->
                            <!--                            <button class="watch_btn2"  v-bind:class='{watch_btn:item.id==isActiveq}'  @click="clickStateq(item.id) "-->
                            <!--                            >{{item.btn2}}</button>-->
                            <!--                            <button class="watch_btn"  :class="{activity:activityindex==index}" v-on:click="d(1)">{{item.btn2}}</button>-->

                        </div></el-col>
                    </el-row>
                    <div class="bang" style="margin: 20px 24px">
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/19577883#NewsSpecial-SubModule-1309908730884890624" target="_blank">昌荣生活|早就发达产业</a>
                            <a class="contentTitle" href="https://www.zhihu.com/special/19690612#NewsSpecial-SubModule-1309499719769194496" target="_blank">生活在挪威是一种什么体验？</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/19577883#NewsSpecial-SubModule-1309908644872667136" target="_blank">安全鲜美|挪威三文鱼</a>
                            <a class="contentTitle" href="https://www.zhihu.com/zvideo/1309968851602149376" target="_blank">挪威三文鱼，原产地至关重要</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/19577883#NewsSpecial-SubModule-1309908689948717056" target="_blank">北境之美|理想原产地</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/19980093" target="_blank">挪威最吸引人的地方有哪些？</a>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
<!--        2-->
        <el-row class="topic" type="flex" justify="center" >
            <!--         左无循环   -->
            <el-col :span="12">
                <div class="topic-item" style="background-color: white;border-radius: 4px;">

                    <img src="https://pic4.zhimg.com/100/v2-50ca10b962c85f2321e253798a02f7e3_hd.png" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">
                    <!--                    <img :src="item.img" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">-->
                    <el-row :gutter="20"  class="topic-head" >
                        <el-col :span="18"><div class="grid-content bg-purple"><a href="https://www.zhihu.com/special/19557769" style="color: #121212">有哪些开车之后才知道的驾驶技巧？</a>
                            <div  class="look">
                                <i>两小时前 更新</i>
                                <i>3,805,921 浏览</i>
                            </div>
                        </div></el-col>
                        <el-col :span="4"><div class="watch_bcg">
                            <button id="bt3" class="watch_btn" @click="handleBt3(this)">关注专题</button>
<!--                            <button   class="watch_btn" @click="handleWatch()"  >关注专题</button>-->
                            <!--                            <button v-else="item.isfocus" class="watch_btn2" @click="handleNoWatch(item)" :style="btn2" >已关注</button>-->

                            <!--                            <button class="watch_btn"  v-bind:class='{watch_btn2:item.id==isActive}'  @click="clickState(item.id) "-->
                            <!--                            >{{item.btn}}</button>-->
                            <!--                            <button class="watch_btn2"  v-bind:class='{watch_btn:item.id==isActiveq}'  @click="clickStateq(item.id) "-->
                            <!--                            >{{item.btn2}}</button>-->
                            <!--                            <button class="watch_btn"  :class="{activity:activityindex==index}" v-on:click="d(1)">{{item.btn2}}</button>-->

                        </div></el-col>
                    </el-row>
                    <div class="bang" style="margin: 20px 24px">
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/19557769#NewsSpecial-SubModule-1310171471034466304" target="_blank">驾驶技巧进阶指南</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/40494621" target="_blank">有哪些只有经验丰富的司机才知道的驾驶技巧？</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/19557769#NewsSpecial-SubModule-1310170875598307328" target="_blank">驾驶习惯有多重要？</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/56026005/answer/148478915" target="_blank">你有哪些好的驾驶习惯可以分享？</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/19557769#NewsSpecial-SubModule-1310224478081667072" target="_blank">看视频学开车</a>
                            <a class="contentTitle" href="https://www.zhihu.com/zvideo/1301818210736324608" target="_blank">有车的注意了，这些开车知识每个人都要掌握，关键时刻能救命</a>
                        </div>
                    </div>
                </div>
            </el-col>
            <!--右边无循环-->
            <el-col :span="12">
                <div class="topic-item" style="background-color: white;border-radius: 4px;">

                    <img src="https://pic2.zhimg.com/100/v2-ed0f4f968dc08602cd150dbc62d1b401_hd.png" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">
                    <!--                    <img :src="item.img" alt="" style="width: 100%;border-radius: 4px  4px 0 0;">-->
                    <el-row :gutter="20"  class="topic-head" >
                        <el-col :span="18"><div class="grid-content bg-purple"><a href="https://www.zhihu.com/special/21199371" style="color: #121212">知乎宇宙主会场 | 人在宇宙</a>
                            <div  class="look">
                                <i>13小时前 更新</i>
                                <i>105,805,540 浏览</i>
                            </div>
                        </div></el-col>
                        <el-col :span="4"><div class="watch_bcg">
                            <button id="bt4" class="watch_btn" @click="handleBt4(this)">关注专题</button>
<!--                            <button   class="watch_btn" @click="handleWatch()"  >关注专题</button>-->
                            <!--                            <button v-else="item.isfocus" class="watch_btn2" @click="handleNoWatch(item)" :style="btn2" >已关注</button>-->

                            <!--                            <button class="watch_btn"  v-bind:class='{watch_btn2:item.id==isActive}'  @click="clickState(item.id) "-->
                            <!--                            >{{item.btn}}</button>-->
                            <!--                            <button class="watch_btn2"  v-bind:class='{watch_btn:item.id==isActiveq}'  @click="clickStateq(item.id) "-->
                            <!--                            >{{item.btn2}}</button>-->
                            <!--                            <button class="watch_btn"  :class="{activity:activityindex==index}" v-on:click="d(1)">{{item.btn2}}</button>-->

                        </div></el-col>
                    </el-row>
                    <div class="bang" style="margin: 20px 24px">
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/21199371#NewsSpecial-SubModule-1311643615836487680" target="_blank">一看就会的宇宙守则</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/430060860" target="_blank">十年难逢的机会，宇宙联盟首次集合。 而你我作为联盟成员，则负责消灭阴阳怪气，捍卫好奇心与想象力。用脑洞创作，为知乎宇宙添砖加瓦！</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/21199371#NewsSpecial-SubModule-1309940014324277248" target="_blank">宇宙星球：能量超人</a>
                            <a class="contentTitle" href="https://www.zhihu.com/zvideo/1307717282844749824" target="_blank">知乎宇宙中的「超能力」你最希望拥有哪一种？你会如何使用它？</a>
                        </div>
                        <div class="bang" style="display: flex">
                            <a class="contentTag" href="https://www.zhihu.com/special/21199371#NewsSpecial-SubModule-1309940229684277248" target="_blank">宇宙星球：全都是钱</a>
                            <a class="contentTitle" href="https://www.zhihu.com/question/430061753" target="_blank">给你十块钱穿越到未来，怎样才能混得风生水起？</a>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <div style="text-align: center;padding: 10px 14px 0 24px;">
            <a href="https://www.zhihu.com/special/all" target="_blank" class="more">查看更多专题  <i style="font-weight: bold" class="el-icon-arrow-right"></i> </a> </div>
    </div>
</template>


<script>
    export default {
        name: "NewTopic",
        props: ['newTopicL','newTopicR'],
        data(){
           return{
        btn2:{
            background:"#EBF5FF",
            color: '#999',
            display:'none'
        },
        btn:{
            display:'block'
        }


    }
        },
        methods:{
            handleBt1(){
                var bt1=document.getElementById("bt1");
                if (bt1.innerHTML =="关注专题"){
                    bt1.innerHTML="已关注"
                    bt1.style.color="gray";
                }else if (bt1.innerHTML =="已关注"){
                    bt1.innerHTML="关注专题"
                    bt1.style.color="#0084ff";
                }
            },

            handleBt2(){
                var bt1=document.getElementById("bt2");
                if (bt1.innerHTML =="关注专题"){
                    bt1.innerHTML="已关注"
                    bt1.style.color="gray";
                }else if (bt1.innerHTML =="已关注"){
                    bt1.innerHTML="关注专题"
                    bt1.style.color="#0084ff";
                }
            },
            handleBt3(){
                var bt1=document.getElementById("bt3");
                if (bt1.innerHTML =="关注专题"){
                    bt1.innerHTML="已关注"
                    bt1.style.color="gray";
                }else if (bt1.innerHTML =="已关注"){
                    bt1.innerHTML="关注专题"
                    bt1.style.color="#0084ff";
                }
            },
            handleBt4(){
                var bt1=document.getElementById("bt4");
                if (bt1.innerHTML =="关注专题"){
                    bt1.innerHTML="已关注"
                    bt1.style.color="gray";
                }else if (bt1.innerHTML =="已关注"){
                    bt1.innerHTML="关注专题"
                    bt1.style.color="#0084ff";
                }
            },


            // handleWatch(item){
            //     this.btn={
            //         display:'block'
            //     }
            //     this.btn2={
            //         display:'none'
            //     }
            //
            // },
            // handleNoWatch(item){
            //     this.btn2={
            //         display:'none'
            //
            //     }
            //     this.btn={
            //         display:'block'
            //     }
            // }

        }
    }
</script>

<style scoped>
    *{
        /*background-color: #F6F6F6;*/
    }
    #el-col{
        background-color: #121212;
    }

    /*.new-topic{*/
    /*    width: 80%;*/
    /*    !*overflow: auto;*!*/
    /*    !*text-align: center;*!*/
    /*    margin: 0 auto;*/
    /*}*/

    .topic-item{
        /*height: 400px;*/
        /*width: 490px;*/
        margin: 20px 10px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

    }
    .topic-item img{
        height: 200px;
    }
    .topic{
        margin-top: 20px;
        /*margin-left: 40px;*/


    }
    .grid-content{
        font-weight: bold;
    }
    .topic-head{
        padding: 18px;
        border-bottom: #F6F6F6 solid 2px;
    }
    .look{
        font-size: 15px;
        color: lightgrey;
        padding: 8px 0;
    }

    .watch_btn,.watch_btn2{
        /*width: 102px;*/
        border: none;
        height: 34px;
        width: 88px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        outline: none;
        cursor: pointer;

    }
    .watch_btn{
        background-color: #EBF5FF;
        color: #0084ff
    }
     .watch_btn2{
        background-color: #EBF5FF;
        color: #999;
         /*display: none;*/
    }
    /*.watch_btn:active{*/
    /*    background-color: #F6F6F6;*/
    /*    color: #999!important*/

    /*}*/
    .big-title{
        width: 330px;
        line-height: 28px;
        max-height: 56px;
        font-size: 20px;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        color: inherit;
        -webkit-box-orient: vertical;
        font-weight: 600;
    }
    .contentTag{
        border-radius: 5px;
        background-color: #F6F6F6;
        flex-shrink: 0;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #8590a6;
        text-decoration: none;
        /*margin:  5px;*/
    }
    .contentTitle{
        margin-left: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: inherit;
        text-decoration: none;
        font-size: 15px;

    }
    .bang a{
        margin: 5px;

    }
    .more{
        /*background-color: white;*/
        border-radius: 25px;
        color: #8590a6;

        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 5px 14px 5px 24px;
        height: 48px;
        margin-top: 25px;
        background-color: #fff;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
    }

</style>